<template>
	<view>
		<view class="lb-main-32">
			<view class="lb-main-box">
				<view class="lb-item">
					<view class="order-detail">
						<view class="d-item">
							订单编号：{{rowData.order_number}}
						</view>
						<view class="d-item">
							创建时间：{{rowData.createtime}}
						</view>
						<view class="d-item">
							支付时间：{{rowData.pay_time}}
						</view>
						<view class="d-item">
							完成时间：{{rowData.finish_time}}
						</view>
						<view class="d-item">
							支付金额：{{rowData.price}}
						</view>
					</view>
					<!-- 商品 -->
					<view class="lb-goods" v-for="(item,index) in rowData.detail" :key="index">
						<view class="g-img">
							<image src="/static/2.png" mode=""></image>
						</view>
						<view class="g-info">
							<view class="name u-line-1">
								{{item.name}}{{item.amount > 1?`任洗${item.amount}件`:''}}
							</view>
							<view class="price">
								{{item.price}}
							</view>
						</view>
					</view>

					<view class="lb-goods" v-if="rowData.goods">
						<view class="g-img">
							<image src="/static/2.png" mode=""></image>
						</view>
						<view class="g-info">
							<view class="name u-line-1">
								{{rowData.goods.name}}
							</view>
							<view class="price">
								{{rowData.price}}
							</view>
						</view>
					</view>
					<!-- 评价内容 -->
					<view class="lb-content">
						<textarea v-model="FormData.order_comments" cols="30" rows="10" placeholder="请输入您想说的话"
							placeholder-style="font-size: 24rpx; color: #CCCCCC;"></textarea>
					</view>
					<!-- 图片 -->
					<view class="lb-img">
						<view class="img-list">
							<view class="img-item" v-for="(item,index) in imgArr" :key="index">
								<view class="close" @click="delImages(index)">
									<image src="/static/icon/close.png" @click="lookImages(index,imgArr)"></image>
								</view>
								<image :src="item" mode=""></image>
							</view>
						</view>
						<view class="img-up" @tap="uploadImage">
							<image src="/static/icon/up-btn.png" mode=""></image>
						</view>
					</view>

				</view>

				<view class="lb-rate">
					<view class="rate-item">
						时效：<u-rate :count="count" v-model="FormData.ageing_mark" size="28rpx" activeColor="#F65D40"
							inactiveColor="#F65D40"></u-rate>
					</view>
					<view class="rate-item">
						质量：<u-rate :count="count" v-model="FormData.quality_mark" size="28rpx" activeColor="#F65D40"
							inactiveColor="#F65D40"></u-rate>
					</view>
					<view class="rate-item">
						包裹：<u-rate :count="count" v-model="FormData.parcel_mark" size="28rpx" activeColor="#F65D40"
							inactiveColor="#F65D40"></u-rate>
					</view>
				</view>
				<view class="lb-btn" @click="formSubmit">
					提交
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		uploadFilesApi,
	} from "@/api/apis/comm.js"
	import {
		orderApiDetail,
		beautifyOrderDetail,
		orderApiComment
	} from "@/api/apis/wash.js"
	import {
		setImgUrl,
	} from "@/utils/comm.js"
	export default {
		data() {
			return {
				count: 5,
				order_id: '',
				rowData: '',
				FormData: {
					order_comments: '', //评价内容
					comment_images: '', //评价图片
					ageing_mark: 5, //时效评分
					quality_mark: 5, //质量评分
					parcel_mark: 5, //包裹评分
					order_id: '', //订单ID
				},
				imgArr: [],
				imgData: [],
				pageType: 0,
			}
		},
		onLoad(options) {
			this.order_id = options.id;
			this.pageType = options.type ? options.type : 0;
			this.getData();
		},
		methods: {
			//提交
			formSubmit() {
				if (!this.FormData.order_comments) {
					this.$u.toast('请输入评价内容!');
					return;
				}
				if (this.imgData) {
					this.FormData.comment_images = this.imgData.toString();
					// this.FormData.comment_images = this.imgData.split(',');
				}
				uni.showLoading({
					title: "提交中",
					mask: true
				});
				this.FormData.type = this.pageType
				orderApiComment(this.FormData).then(res => {
					uni.hideLoading();
					this.$u.toast('提交成功!');
					setTimeout(() => {
						if (this.pageType == 1) {
							uni.navigateTo({
								url: '/pages/mei-rong/order-list/order-list?current=4'
							})
						} else {
							uni.navigateTo({
								url: '/pages/xi-hu/order-list/order-list?current=4'
							})
						}

					}, 1500)
				})

			},
			//订单详情
			async getData() {
				uni.showLoading({
					title: '请求中',
					mask: true
				});
				let res;
				if (this.pageType == 1) {
					res = await beautifyOrderDetail({
						order_id: this.order_id
					})
				} else {
					res = await orderApiDetail({
						order_id: this.order_id
					})
				}
				uni.hideLoading();
				if (res.code == 1) {
					this.rowData = res.data;
					this.FormData.order_id = res.data.id;
				}
			},
			//查看数组图片
			lookImages(index, data) {
				if (data) {
					uni.previewImage({
						current: index,
						urls: data
					});
				}
			},
			//删除图片
			delImages(index) {
				let _this = this;
				_this.imgArr.splice(index, 1);
				_this.imgData.splice(index, 1);
				this.$forceUpdate();
			},
			//上传图片
			uploadImage(count = 9) {
				let _this = this;
				uni.chooseImage({
					count: count, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album', 'camera'], //从相册选择
					success: function(album) {
						// console.log(album.tempFilePaths)
						album.tempFilePaths.forEach((item, index) => {
							// console.log(item)
							uni.getImageInfo({
								src: item, //album.tempFilePaths[0],
								success: function(image) {
									// console.log(image)
									uploadFilesApi(image.path).then(res => {
										if (res.code == 1) {
											let fullurl = res.data.fullurl;
											let url = res.data.url;
											_this.imgArr.push(fullurl);
											_this.imgData.push(url);
										}
									});
								}
							});
						})

					}
				});
			},
		}
	}
</script>

<style lang="scss">
	.lb-item {
		display: flex;
		flex-direction: column;

		.order-detail {
			.d-item {
				font-size: $main-font-24;
				color: $main-font-color;
				padding-bottom: 12rpx;
			}
		}

		.lb-goods {
			display: flex;
			margin-top: 12rpx;

			.g-img {
				width: 100rpx;
				height: 100rpx;
				background: rgba(255, 255, 255, 0.39);
				box-shadow: 0rpx 2rpx 4rpx rgba(0, 0, 0, 0.16);
				border-radius: 16rpx;

				image {
					border-radius: 16rpx;
				}
			}

			.g-info {
				width: calc(100% - 160rpx);
				padding-left: 24rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				.name {
					font-size: $main-font-28;
					color: $main-font-color;
				}

				.time {
					display: flex;
					font-size: $main-font-24;
					color: $main-font-color;

				}

				.price {
					// display: flex;
					font-size: $main-font-24;
					color: #F65D40;

					&::before {
						content: '¥';
						font-size: $main-font-20;
					}

				}
			}
		}

		.lb-content {
			height: 300rpx;
			background-color: #F5F5F5;
			border: 2rpx solid #CCCCCC;
			border-radius: 16rpx;
			padding: 24rpx;
			box-sizing: border-box;
			margin-top: 36rpx;

			textarea {
				width: 100%;
				height: 246rpx;
				font-size: $main-font-28;
				color: $main-font-color;
			}

		}
	}

	.lb-img {
		display: flex;
		padding: 24rpx 0;
		width: 100%;

		.img-list {
			max-width: calc(100% - 150rpx);
			display: flex;

			.img-item {
				width: 150rpx;
				height: 150rpx;
				margin: 0 20rpx 20rpx 0;
				position: relative;

				.close {
					position: absolute;
					width: 24rpx;
					height: 24rpx;
					top: -12rpx;
					right: -12rpx;
					z-index: 100000;
				}
			}

		}

		.img-up {
			width: 150rpx;
			height: 150rpx;
		}

	}

	.lb-rate {
		padding: 12rpx 0;

		.rate-item {
			padding: 12rpx 0;
			display: flex;
			font-size: 24rpx;
			color: #333333;
		}
	}

	.lb-btn {
		margin-top: 60rpx;
		// width: 600rpx;
		height: 88rpx;
		background: linear-gradient(134deg, #F7583F 0%, #F28F4C 100%);
		border-radius: 44rpx;
		line-height: 86rpx;
		text-align: center;
		font-size: 28rpx;
		color: #FFFFFF;
	}
</style>